<template>
    <header class="post-header">
        <div class="post-header-div">
            <div class="post-header-item">
                <van-image
                round
                width="40px"
                height="40px"
                :src='userimg'
                id="owner-img"
                class="header-img"
                />
            </div>

            <div class="post-header-item">
                <div id="post-ownername">{{ownername}}</div>
                <div id="post-time">{{time}}</div>
            </div>
            <div class="post-header-item">

            </div>
        </div>
    </header>
    <p>
        {{ownercontent}}
    </p>
    <ul id="main-img">
        <li v-for="(img, index) in postimg" :key="index">
            <img :src="img" alt="">
        </li>
    </ul>
    <footer>
        <van-tag mark type="primary" id="post-owner-tag" v-if="hasTag">{{tag}}</van-tag>
    </footer>
</template>

<script>
import {Image, NavBar,Icon, Tag} from 'vant'

export default {
    data(){
        return{
            hasTag: true
        }
    },
    created(){
        //没标签就不展示
        if (this.tag == null || this.tag.length == 0)
            this,this.hasTag = false
    },
    components: {
        [Image.name]:Image,
        [NavBar.name]:NavBar,
        [Icon.name]:Icon,
        [Tag.name]:Tag,
    },
    props: {
      userimg: {
        type: String
      },
      postimg: {
        type: Array
      },
      ownername: {
          type: String
      },
      time: {
          type: String
      },
      ownercontent: {
          type:String
      },
      ownercontent: {
          type:String
      },
      tag: {
          type:String
      }
    },
}
</script>

<style scoped>
.post-header{
    text-align: left;
    background-color: rgb(255, 255, 255);
}

.post-header-div{
    display: flex;
}

#owner-img{
    margin-left: 20px;
    margin-top: 10px;
}

#post-ownername{
    margin-top: 5px;
    font-size: 18px;
    margin-left: 20px;
    font-weight: bold;
}

#post-time{
    font-size: 13px;
    color: rgb(99, 99, 99);
    margin-top: 5px;
    margin-left: 20px;
}

p{
  font-size: 14px;
  width: 90%;
  margin-left: 20px;
  text-align: left;
}

footer{
    text-align: left;
}

#post-owner-tag{
    margin-left: 20px;
    margin-bottom: 10px;
    height: 20px;
}

#main-img li{
    text-align: center;
}

#main-img li img{
    max-width: 90%;
}
</style>